<template>
    <div class="app-container">
        <!-- rules表单验证规则 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="medium">
            <el-form-item label="sn条码" prop="deviceBarcode">
                <el-input clearable v-model="form.deviceBarcode" :style="{ width: inputWid(form.deviceBarcode) }" />
            </el-form-item>
            <el-form-item label="物料编码" prop="materialCode">
                <el-input clearable v-model="form.materialCode" :style="{ width: inputWid(form.materialCode) }"/>
            </el-form-item>
            <el-form-item label="新旧条码类型" prop="type">
                <el-select v-model="form.type" style="width:300px">
                    <el-option :value="item" :label="item" v-for="(item,index) in this.typeList" :key="index"/>
                </el-select>
            </el-form-item>
            <el-form-item label="旧条码" prop="deviceCode">
                <el-input clearable v-model="form.deviceCode" :style="{ width: inputWid(form.deviceCode) }"/>
            </el-form-item>
            <el-form-item label="新条码" prop="deviceCodeEnd">
                <el-input clearable v-model="form.deviceCodeEnd" :style="{ width: inputWid(form.deviceCodeEnd) }"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">确定</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { deviceBarcodeReplace } from '@/api/emsPart.js'
export default {
    name: 'deviceBarcodeReplace',
    data() {
        var validateDeviceCode = (rule, value, callback) => {
            if (!value) {
                callback(new Error('旧条码不能为空！'));
            } else {
                let outid = this.form.materialCode
                if(this.form.materialCode.substring(0,2) == '03') {
                    outid = this.form.materialCode.substring(2,this.form.materialCode.length)
                }
                // if(!value.includes(outid)){
                //     callback(new Error('该条码不存在该工单！'));
                // }
                callback();
            }
        };
        var validateDeviceCodeEnd = (rule, value, callback) => {
            if (!value) {
                callback(new Error('旧条码不能为空！'));
            } else {
                let outid = this.form.materialCode
                if(this.form.materialCode.substring(0,2) == '03') {
                    outid = this.form.materialCode.substring(2,this.form.materialCode.length)
                }
                if(!value.includes(outid)){
                    callback(new Error('新条码中不存在物料编码!'));
                }
                callback();
            }
        };
        return {
            form: {
                deviceBarcode: '',                          //sn条码
                materialCode: '',                        //物料编码
                deviceCode: '',                         //旧条码
                deviceCodeEnd: '',                       //新条码
                type: ''                                //新旧条码类型
            },
            typeList: ['器件','附件'],
            rules: {
                deviceBarcode: [
                    { required: true, message: 'sn条码不能为空！', trigger: 'blur' }
                ],
                deviceCode: [
                    { validator: validateDeviceCode, trigger: 'blur' },
                    { required: true, message: '旧条码不能为空！', trigger: 'blur' },
                    // { type: 'number', message: '入库数量必须为数字值'}
                ],
                materialCode: [
                    { required: true, message: '物料编码不能为空！', trigger: 'blur' }
                ],
                deviceCodeEnd: [
                    { validator: validateDeviceCodeEnd, trigger: 'blur' },
                    { required: true, message: '新条码不能为空！', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '新旧条码类型不能为空！', trigger: 'blur' }
                ],
            },
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '300px'
            } else {
              return (300 + (String(value).length-10)*4) + 'px'
            }
        }
      }
    },
    methods: {
        // 提交表单之前先进行验证
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.onSubmit()
            } else {
                return false
                }
            })
        },
        async onSubmit() {
            let query = Object.assign({},this.form)
            console.log(this.form.deviceCode.match(/06S(\S*)1P/));
            if(this.form.deviceBarcode.includes('06S')){query.deviceBarcode = this.form.deviceBarcode.match(/06S(\S*)1P/)[1]}
            if(this.form.deviceCode.includes('06S')){ 
                if(this.form.deviceCode.match(/06S(\S*)1P/) !== null){
                    query.deviceCode = this.form.deviceCode.match(/06S(\S*)1P/)[1]
                }}
            if(this.form.deviceCodeEnd.includes('06S')){ query.deviceCodeEnd = this.form.deviceCodeEnd.match(/06S(\S*)1P/)[1] }
            console.log(query);
            const data = await deviceBarcodeReplace(query)
            // if(data.code == '500') return
            if(data.code != '1') return this.$message.error(data.msg)
            this.$message.success(data.msg)
            this.resetForm('form')
        },
        // 对整个表单输入进去清空
        resetForm(formItem) {
          this.$refs[formItem].resetFields()
        }
    }
}
</script>

<style>

</style>
